<template>
    <div class="box">
        <div class="top">
            <div class="date" @click="openPicker">
                <span></span>{{dateYear}}
            </div>
            <div class="header">
                <div class="header-icon fl">
                    <img src="../..//assets/images/people.png" alt="">
                </div>
                <div class="header-text fl">
                    <p class="name">{{nameAndAge.xm}}</p>
                    <p>
                        <span>性别：{{nameAndAge.xb}}</span>
                        <span>出生日期：{{nameAndAge.birthday}}</span>
                    </p>
                </div>
            </div>
            <div class="top-tab">
                <div class="left fl"  @click="goMzDetail()">
                    <!--<router-link :to="{path:'/jzfx/detail',query:{}}">-->
                    <div class="img fl">
                        <img src="../../assets/images/grjyzc.png" alt="">
                    </div>
                    <div class="text fr">
                        <p>个人就医支出</p>
                        <p class="money">￥{{this.fftt.heji==null ?0:this.fftt.heji}}</p>
                    </div>
                    <!--</router-link>-->

                </div>
                <div class="right fr" @click="goMzDetail()">
                    <!--<router-link :to="{path:'/jzfx/detail',query:{}}">-->
                    <div class="img fl" >
                        <img src="../../assets/images/grzfzc.png" alt="">
                    </div>
                    <div class="text fr">
                        <p>个人自负支出</p>
                        <p class="money">￥{{this.fftt.zf==null ?0:this.fftt.zf}}</p>
                    </div>
                    <!--</router-link>-->

                </div>
            </div>
        </div>
        <div class="main">
            <div class="charts"  >
                <div class="charts-left " id="myChart1"></div>
                <div class="charts-position">
                    <p class="quare"><span ></span>住院费用占比</p>
                    <p class="text textBlue">{{this.fftt.zyzb==null ?0:this.fftt.zyzb}}%</p>
                    <p class="quare"><span class="yellowBj"></span>门诊费用占比</p>
                    <p class="text textYellow">{{this.fftt.mzzb==null ?0:this.fftt.mzzb}}%</p>
                    <p class="circle"><span ></span>全年住院{{this.jzcs.zycs==null ?0:this.jzcs.zycs}}次</p>
                    <p class="circle"><span class="yellowBj"></span>门诊就诊{{this.jzcs.mzcs==null ?0:this.jzcs.mzcs}}次</p>
                </div>
            </div>
            <div class="tab">
                <div class="item">
                    <p class="title">
                        <img src="../../assets/images/fyzb.png" alt="">
                        费用占比
                    </p>
                    <p >个人自负费用占比</p>
                    <span class="persent">{{this.fftt.zfzb==null ?0:this.fftt.zfzb}}%</span>
                </div>
                <div class="item">
                    <p class="title">
                        <img src="../../assets/images/jbxx.png" alt="">
                        疾病次数排名
                    </p>
                    <div v-for="(item,index) in zdfx" :key="index" v-if="index < 4">
                        <p class="inline">{{item.jzlx}}<span>{{item.jzcs}}</span>次</p>
                        <!--<p class="inline">湿疹<span>2</span>次</p>-->
                        <!--<p class="inline">颈椎病<span>1</span>次</p>-->
                    </div>
                </div>
                <!--<div class="item">-->
                <!--<p class="title">-->
                <!--<img src="../../assets/images/yycs.png" alt="">-->
                <!--预约次数-->
                <!--</p>-->
                <!--<p >专家门诊预约<span>3</span>次</p>-->
                <!--<p>普通门诊预约<span>2</span>次</p>-->
                <!--</div>-->
                <!--<div class="item">-->
                <!--<p class="title">-->
                <!--<img src="../../assets/images/zxjk.png" alt="">-->
                <!--在线健康-->
                <!--</p>-->
                <!--<p >健康咨询<span>2</span>次</p>-->
                <!--<p>健康评价<span class="persent">4</span>次</p>-->
                <!---->
                <!--</div>-->
            </div>
        </div>

        <mt-popup
                v-model="popupVisible"
                position="bottom"
                closeOnClickModal="true"
                class="mint-popup"
        >
            <!-- <p>完成</p> -->
            <mt-picker :slots="slots" @change="onValuesChange"  ref="picker" ></mt-picker>
        </mt-popup>

        <!-- 数据仅供参考提示，hosName通过接口获得，在该组件赋值传给子组件，首页不需要传值，默认为空 -->
        <tips :hosName="hosName"></tips>
        <!-- 水印 -->
        <div class="watermark"></div>
    </div>


</template>
<script>
    import {Picker,Popup} from 'mint-ui'
    import tips from '@/components/tips.vue'
    import { getFeeAnalysisByIdApi,getMedicalRecordAnalysisByIdApi,getDiagnosisAnalysisByIdApi} from '@/api/healthRecords'

    export default {
        name: 'JZFX',
        data () {
            return {
                hosName:'',//医院名称
                paramters: {
                    "zjhm":"",
                    "nf":""
                },
                nameAndAge:JSON.parse(localStorage.getItem('jbxx')),
                ffttt:[],
                fftt: {"heji":"0"},
                jzcs: {"mzcs":""},
                zdfx: [],
                dateYear:new Date().getFullYear(),
                popupVisible:false,
                slots:[],
                yanse: []
            }
        },
        mounted(){
            this.drawLine();
            var i;
            var obj={
                values:[]
            }
            for (i = 1980; i < 2200; i++) {
                obj.values.push(i);
            }
            obj.values.forEach((item,index)=>{
                if(item == new Date().getFullYear()) {
                    obj.defaultIndex=index
                }
            })
            this.slots.push(obj);
        },
        watch: {
            dateYear: {
                handler: function() {
                    this.ffttt=[], this.fftt={"heji":"0"},
                        this.jzcs={"mzcs":""},
                        this.zdfx=[],
                        this.yanse=[],

                    this.getFeeAnalysisById()
                    this.getMedicalRecordAnalysisById()
                    this.getDiagnosisAnalysisById()
                },
                deep: true,
                immediate: true
            }},
        methods:{
            onValuesChange(picker,values){

                    this.$nextTick(()=>{
                        picker.setSlotValue(2, values[0]);
                    })
                if (values[0] == null) {
                    this.paramters.nf =   new Date().getFullYear();
                }else {
                    this.paramters.nf = values[0];
                }
                this.dateYear =  this.paramters.nf;
            },
            openPicker(){
                this.popupVisible = true
            },
            init() {
                this.paramters.zjhm = JSON.parse(localStorage.getItem('zjhm')).zjhm;
                this.paramters.nf = '2019';
            },
            goMzDetail() {
                this.$router.push({ name: "jzfxDetail", query: {  } });
                this.fftt.nf = this.paramters.nf;
                localStorage.setItem('fy',  JSON.stringify(this.fftt))
            },

            //1.8.1费用分类分析
            getFeeAnalysisById() {
                getFeeAnalysisByIdApi(JSON.stringify(this.paramters)).then(response => {
                    if (response.data.code == 1) {
                        let zoji = 0;
                        let zifu = [];
                        let yibao = [];
                        let menzhen = [];
                        let zhuyuan = [];
                        this.fftt.map = response.data.data;
                        this.fftt.jibi = response.data.data.length;
                        response.data.data.forEach(item => {
                            let bxlx = item.bxlx
                            let jzlx = item.jzlx
                            if (bxlx=="0") {           //非医保
                                zifu.push(item)
                            }

                           else if (bxlx=="1") {   //医保
                                yibao.push(item)
                            }
                            if (jzlx=="1") {    //门诊
                                menzhen.push(item)
                            }else if (jzlx=="2") {    //住院
                                zhuyuan.push(item)
                            }
                            zoji += parseFloat(item.je);
                        });
                        this.fftt.heji = Math.round(zoji);
                        if (zifu.length > 0) {
                            let value = {};
                            let zifuheji = 0;
                            zifu.forEach(item1 => {
                                zifuheji += parseFloat(item1.je)
                            });
                            value.value = Math.round(zifuheji);
                            value.zhanbi = Math.round(zifuheji/ zoji * 10000) /100;
                            value.name = "自费";
                            value.class = "zl";
                            this.fftt.zfzb = value.zhanbi;
                            this.fftt.zf = value.value;
                            // this.ffttt.push(value);
                            value = {};
                        }
                        if (yibao.length > 0) {
                            let value = {};
                            let yibaoheji = 0;
                            yibao.forEach(item1 => {
                                yibaoheji += parseFloat(item1.je)
                            })
                            value.value = Math.round(yibaoheji);
                            value.zhanbi = Math.round(yibaoheji/ zoji * 10000) /100;
                            value.name = "医保";
                            value.class = "zl"
                            this.fftt.ybzb = value.zhanbi
                            this.fftt.yb = value.value
                            // this.ffttt.push(value);
                            value = {};
                        };
                        if (menzhen.length > 0) {
                            let value1 = {};
                            let menzhenheji = 0;
                            menzhen.forEach(item1 => {
                                menzhenheji += parseFloat(item1.je)
                            })
                            value1.value = Math.round(menzhenheji);
                            value1.zhanbi = Math.round(menzhenheji/ zoji * 10000) /100;
                            value1.name = "门诊";
                            value1.class = "mz"
                            this.yanse.push("#F1891A")
                            this.fftt.mzzb = value1.zhanbi
                            this.fftt.mz = value1.value
                            this.ffttt.push(value1);

                            value1 = {};
                        };
                        if (zhuyuan.length > 0) {
                            let value2 = {};
                            let zhuyuanheji = 0;
                            zhuyuan.forEach(item1 => {
                                zhuyuanheji += parseFloat(item1.je)
                            })
                            value2.value = Math.round(zhuyuanheji);
                            value2.zhanbi = Math.round(zhuyuanheji/ zoji * 10000) /100;
                            value2.name = "住院";
                            value2.class = "zy"
                            this.yanse.push("#1EA1D9");
                            this.fftt.zyzb = value2.zhanbi
                            this.fftt.zy = value2.value
                            this.htt = value2;
                            this.ffttt.push(this.htt);

                        };
                    }
                    this.drawLine();
                })
            },
            //1.8.2就诊次数分析
            getMedicalRecordAnalysisById() {
                getMedicalRecordAnalysisByIdApi(JSON.stringify(this.paramters)).then(response => {
                    if (response.data.code == 1) {
                        response.data.data.forEach(item => {
                            if (item.jzlx == "1") {
                                this.jzcs.mzcs = item.jzcs;
                            } else {
                                this.jzcs.zycs = item.jzcs;
                            }
                        })
                    }
                })
            },
            //1.8.3诊断分析
            getDiagnosisAnalysisById() {
                getDiagnosisAnalysisByIdApi(JSON.stringify(this.paramters)).then(response => {
                    if (response.data.code == 1) {
                        this.zdfx = response.data.data;
                    }
                })
            },
            drawLine(){
                let myChart = this.$echarts.init(document.getElementById('myChart1'))
                //回执图表
                myChart.setOption({
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)",
                        show:true
                    },
                    toolbox: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)",
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {
                                show: true,
                                type: ['pie', 'funnel']
                            },
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,

                    series: [
                        {
                            name:'访问来源',
                            type:'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            roseType : 'radius',
                            center:[110,130],
                            label: {
                                normal: {
                                    show: false,
                                    position: 'left'
                                },
                                // emphasis: {
                                //     show: true,
                                //     textStyle: {
                                //         fontSize: '50',
                                //         fontWeight: 'bold'
                                //     }
                                // }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                },
                                // emphasis: {
                                //     show: true
                                // }
                            },
                            color:this.yanse,
                            data:this.ffttt

                            //
                            // [
                            // {"name":"门诊1" ,"value":1},
                            // {"name":"住院" ,"value":233},
                            // {"name":"门诊" ,"value":233}
                            // ]
                        }
                    ]
                });
            }
        },

        components:{
            tips
        },
        created(){
            this.init();
            this.getFeeAnalysisById()
            this.getMedicalRecordAnalysisById()
            this.getDiagnosisAnalysisById()
        }
    }
</script>
<style scoped lang="less">
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .top{
        background:#fff;
        .date{
            text-align: right;
            font-size: 1rem;
            color:#1EA1D9;
            padding-right: 1rem;
            padding-top:0.6rem;
            span{
                display: inline-block;
                width: 0;
                height: 0;
                border-color:#1EA1D9 transparent;
                border-width: 0rem 0rem 0.4rem 0.4rem;
                border-style:solid;
                margin-right: 0.5rem;
            }
        }
        .header{
            border-bottom: #ddd solid 1px;
            overflow: hidden;
            padding:0.6rem 1rem;
            .header-icon{
                width: 2.3rem;
                height: 2.3rem;
                border-radius: 50%;
                overflow: hidden;
                img{
                    width: 100%;
                }
                margin-right: 1rem;
            }
            .header-text{
                width:17rem;
                font-size: 1rem;
                color:#666;
                .name{
                    font-size: 1rem;
                    color:#323333;
                    margin-bottom:0.3rem;
                }
            }
        }
        .top-tab{
            width: 100%;
            display: flex;
            overflow: hidden;
            box-sizing: border-box;
            padding:0 1.6rem;
            .img{
                width: 3rem;
                height:3rem;
                border-radius: 50%;
                overflow: hidden;
                display: inline-block;
                vertical-align: middle;
                img{
                    width: 100%;
                }
            }
            .left{
                overflow: hidden;
                width: 50%;
                border-right: #ddd solid 1px;
                padding:2rem 0;
                .text{
                    margin-right:1rem;
                }
            }
            .right{
                overflow: hidden;
                width: 50%;
                padding:2rem 0;
                .img{
                    margin-left: 1rem;
                }
            }

            .text{
                width: 6rem;
                font-size: 1rem;
                color:#666;
                .money{
                    font-size: 1.3rem;
                    color:#323333;
                }
            }
        }
    }
    .main{
        margin-top:2rem;
        background: #fff;
        .charts{
            height: 15rem;
            border-bottom: #ddd solid 1px;
            position: relative;
            .charts-left{
                height: 15rem;
                border-bottom: #ddd solid 1px;
                position: relative;
            }
            .charts-position{
                position: absolute;
                top:3rem;
                right:1rem;
                font-size: 1rem;
                color:#323333;
                span{
                    display: inline-block;
                    background: #1EA1D9;
                    vertical-align: middle;
                    margin-right: 0.5rem;
                }

                .yellowBj{
                    background: #F1891A;
                }
                .quare{
                    .zy{
                        background: #1EA1D9;
                    }
                    .mz{
                        background: #F1891A;
                    }
                    span{

                        width: 1rem;
                        height:1rem;
                        border-radius: 0.5rem;
                    }
                }
                .circle{
                    span{
                        width: 0.6rem;
                        height:0.6rem;
                        border-radius: 50%;
                        margin-left:0.4rem;
                    }
                    margin-bottom:0.5rem;
                }
                .text{
                    font-size: 1.3rem;
                    color:#1EA1D9;
                    margin-left:2rem;
                    margin-block-end: 0.5rem;
                }
                .textYellow{
                    color:#F1891A;
                }
            }
        }
        .tab{
            display: flex;
            flex-wrap:wrap;
            padding: 1rem;
            box-sizing: border-box;
            justify-content: space-between;
            .item{
                width: 48%;
                background: #F3F4F8;
                margin-bottom: 1rem;
                border-radius: 0.5rem;
                padding: 1.5rem ;
                font-size: 1rem;
                color:#323333;
                .title{
                    font-size: 1rem;
                    color:#009CDF;
                    img{
                        width: 2rem;
                        vertical-align: middle;
                        // margin-right: 1rem;
                    }

                }
                p{
                    margin-bottom:0.6rem;
                }
                span{
                    font-size: 1.3rem;
                    color:#333;

                }
                .inline{
                    display: inline;
                    width: 50%;
                    margin-right:0.5rem;
                }
            }
        }
    }
    .mint-popup-bottom{
        width: 100%;
    }
</style>
